<template>
  <div class="invoice-detail">
    <!-- 返回按钮 -->
    <div class="back-btn">
      <a-button @click="goBack">
        <template #icon><left-outlined /></template>
        返回
      </a-button>
    </div>

    <!-- 开票申请单信息 -->
    <a-card title="开票申请单信息" class="info-card">
      <a-descriptions :column="3" :labelStyle="formConfig.labelCol.style">
        <a-descriptions-item label="申请人">{{ formData.submitPerson }}</a-descriptions-item>
        <a-descriptions-item label="申请时间">{{ formData.createdAt }}</a-descriptions-item>
        <a-descriptions-item label="所在部门">{{ formData.submitDepartment }}</a-descriptions-item>
        <a-descriptions-item label="所属渠道">{{ formData.institution }}</a-descriptions-item>
        <a-descriptions-item label="发票性质">{{ typeMap[formData.type] }}</a-descriptions-item>
        <a-descriptions-item label="单位名称">{{ formData.counterpartName }}</a-descriptions-item>
        <a-descriptions-item label="纳税人识别号">{{ formData.tin }}</a-descriptions-item>
        <a-descriptions-item label="对方开户银行">{{ formData.counterpartBank }}</a-descriptions-item>
        <a-descriptions-item label="对方开户账户">{{ formData.counterpartBankAccount }}</a-descriptions-item>
        <a-descriptions-item label="对方单位地址">{{ formData.counterpartAddress }}</a-descriptions-item>
        <a-descriptions-item label="对方单位电话">{{ formData.counterpartPhone }}</a-descriptions-item>
        <a-descriptions-item label="开票单位">{{ formData.openerName }}</a-descriptions-item>
        <a-descriptions-item label="开具发票内容">{{ formData.openerContent }}</a-descriptions-item>
        <a-descriptions-item label="开票单价">¥{{ formData.openerPrice }}</a-descriptions-item>
        <a-descriptions-item label="开票数量">{{ formData.openerNum }}</a-descriptions-item>
        <a-descriptions-item label="开票金额">¥{{ formData.openerSumPrice }}</a-descriptions-item>
        <a-descriptions-item label="合计金额">¥{{ formData.sumPrice }}</a-descriptions-item>
        <a-descriptions-item label="订单数量"
          >{{ formData.orderNum }}<span class="link-button" @click="viewOrders">查看订单</span></a-descriptions-item
        >
        <a-descriptions-item label="发票照片" v-if="userInfo.departmentId == 30 && formData.status == 4">
          <div class="invoicePic-box">
            <div>
              <a-button @click="uploadPic">上传</a-button>
            </div>
            <UploadImage default=".jpg,.png,.jpeg,.pdf" :maxCount="10" v-model="invoicePic" />
          </div>
        </a-descriptions-item>
      </a-descriptions>

      <!-- 查看订单按钮 -->
      <div class="view-order"></div>
    </a-card>

    <!-- 底部按钮 -->
    <div
      class="footer-btns"
      v-if="(userInfo.departmentId == 29 && formData.status == 0) || (userInfo.departmentId == 30 && formData.status == 1)"
    >
      <a-button type="primary" danger @click="showRejectModal">拒绝</a-button>
      <a-button type="primary" @click="handleInvoice">{{ userInfo.departmentId == 29 ? '同意' : '开票' }} </a-button>
    </div>

    <!-- 拒绝原因弹窗 -->
    <!-- <a-modal v-model:visible="rejectVisible" title="拒绝原因" @ok="handleReject" okText="确认" cancelText="取消">
      <a-form :model="rejectForm" :rules="rules">
        <a-form-item name="reason">
          <a-textarea v-model:value="rejectForm.reason" placeholder="请输入拒绝原因" :rows="4" />
        </a-form-item>
      </a-form>
    </a-modal> -->

    <listModal ref="listModalRef" @close="handleClose" />
    <inputModal @ok="handleReject" ref="inputModalRef" label="原因" title="拒绝原因" :number="number"></inputModal>
  </div>
</template>

<script setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { ref, onMounted, reactive, createVNode } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { LeftOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useStore } from 'vuex'
import { formConfig, dataObj } from './data'
import listModal from '../components/listModal.vue'
import inputModal from '@/components/common/inputModal.vue'
import { useModal } from '@/hooks'
import { selectInvoiceById, updateInvoiceStatus, insertInvoicePic } from '@/api/buisness/index'
import UploadImage from '@/components/common/UploadImage.vue'

const store = useStore()
const userInfo = JSON.parse(store.state.userInfo)
const invoicePic = ref([])
const route = useRoute()
const id = route.query.id
const router = useRouter()
const formData = ref({})
const { rejectForm, rules, number } = reactive(dataObj)
const inputModalRef = ref()
const typeMap = {
  0: '增值税专用发票',
  1: '普通发票'
}
// 返回上一页
const goBack = () => {
  router.back()
}
const listModalRef = ref()
// 查看订单
const viewOrders = () => {
  listModalRef.value.showModal(id)
}

// 显示拒绝弹窗
const showRejectModal = () => {
  inputModalRef.value.showModal()
}

// 处理拒绝
const handleReject = value => {
  console.log(value)
  let form = {
    status: 1,
    cancelCause: value,
    id: id
  }
  console.log(form)
  updateInvoiceStatus(form).then(res => {
    getDetail()
  })
  // TODO: 调用拒绝接口
}

// 处理开票
const handleInvoice = () => {
  const { closeModal } = useModal.confirm({
    title: '提示',
    icon: createVNode(ExclamationCircleOutlined),
    content: '同意该申请',
    onOk() {
      let form = {
        status: 0,
        id: id
      }
      console.log(form)
      updateInvoiceStatus(form).then(res => {
        getDetail()
        closeModal()
      })
    }
  })
}
const uploadPic = () => {
  let form = {
    ...formData.value,
    invoicePic: invoicePic.value.join(',')
  }
  insertInvoicePic(form).then(res => {
    if (res.success) {
      getDetail()
      message.success(`上传成功`)
    }
  })
}
// 获取详情数据
const getDetail = () => {
  selectInvoiceById({ id }).then(res => {
    formData.value = res.object
    invoicePic.value = formData.value.invoicePic.split(',')
  })
}

onMounted(() => {
  getDetail()
})
</script>

<style scoped lang="less">
.invoice-detail {
  padding: 20px;

  .back-btn {
    margin-bottom: 20px;
  }

  .info-card {
    margin-bottom: 20px;

    .view-order {
      margin-top: 16px;
      text-align: right;
    }
  }

  .footer-btns {
    text-align: center;
    margin-top: 24px;

    .ant-btn {
      margin: 0 8px;
      min-width: 100px;
    }
  }
}
::v-deep .link-button {
  color: #006d77;
  cursor: pointer;
}
.invoicePic-box {
  display: flex;
  flex-direction: column;
  .btn {
  }
}
</style>
